<template>
  <Loger ref="questionLoger" :size="'small'" @submit="handleSubmit" @cancel="handelCancel">
    <el-form ref="questionFormRef" :model="questionForm" :rules="rules" label-width="60px" class="demo-ruleForm">
      <el-form-item label="题目:" prop="title">
        <el-input v-model="questionForm.title" />
      </el-form-item>
      <el-form-item label="序号:" prop="idx">
        <el-input v-model="questionForm.idx" />
      </el-form-item>
      <el-form-item label="选项:" prop="choice">
        <ul>
          <li v-for="(choice, i) in questionForm.choices" :key="i">
            <p class="choice-item-p" v-if="i < questionForm.choices.length - 1">
              <span>{{ AtoZ[i] || '--' }}、</span>
              <el-input style="width: 240px" v-model="questionForm.choices[i]" />
            </p>
            <p class="choice-item-p" v-else>
              <span>{{ AtoZ[i] }}、</span>
              <el-input style="width: 240px" v-model="questionForm.choices[i]" />
              <el-button type="primary" style="margin-left: 10px" @click="addOneChoice" v-if="questionForm.choices.length < AtoZ.length">+</el-button>
              <el-button type="danger" style="margin-left: 10px" v-if="questionForm.choices.length > 2" @click="removeOneChoice">-</el-button>
            </p>
          </li>
        </ul>
      </el-form-item>
    </el-form>
  </Loger>
</template>

<script lang="ts" setup>
  import { useMainStore } from '@/store';
  import { AtoZ } from '@/utils/common-data';
  import { Http } from '@/utils/http';
  import { ref, reactive } from 'vue';
  import { Question } from '../../utils/scale.type';

  // 全局状态获取
  const mainStore = useMainStore();
  const scaleId: number = mainStore.getCurrentScale;

  // ref 获取
  const questionFormRef = ref();
  const questionLoger = ref();

  // 通信
  const emit = defineEmits({
    reLoad: null,
  });

  // 弹框类型
  const dialogType = ref('new');

  // 表单项
  const questionForm = reactive<Question>({
    title: '',
    idx: 0,
    choices: ['是', '否'],
  });
  const rules = reactive({
    title: [{ required: true, trigger: 'blur', message: '题目是必填项！' }],
    idx: [{ required: true, trigger: 'blur', message: '序号是必填项！' }],
  });

  // 确定/取消弹框
  const handleSubmit = async (cb: () => void) => {
    await questionFormRef.value.validate((v: boolean) => {
      if (v) {
        let url = `/question/${dialogType.value === 'new' ? 'create' : 'update'}`;

        Http.post(url, { ...questionForm, ...{ scaleId } }).then(() => {
          emit('reLoad');
          cb();
        });
      }
    });
  };
  const handelCancel = (cb: () => void) => {
    questionFormRef.value.resetFields();
    cb();
  };

  // 添加/移除一个选项
  const addOneChoice = () => {
    questionForm.choices.push('');
  };
  const removeOneChoice = () => {
    questionForm.choices.splice(questionForm.choices.length - 1, 1);
  };

  /**
   * 弹框打开方法：使用传参来渲染弹框
   * @param title string
   * @param type 'new' | 'edit'
   * @param qt Question
   */
  const open = (title: string, type: 'new' | 'edit', qt: Question) => {
    questionLoger.value.open(title);
    dialogType.value = type;

    if (type === 'edit') {
      questionForm.id = qt.id;
    }
    questionForm.title = qt.title;
    questionForm.choices = Array.from(qt.choices); // 简单深拷贝
    questionForm.idx = qt.idx;
  };

  // 对外暴露属性/方法
  defineExpose({
    open,
  });
</script>
